// 药房管理
<template comments>
  <div class="pharmacy">
     <TopManu RegistrationFee="b8"   :pharmacyStatus="true" @handcreate="handcreate" :signOut="true" @handleQuit="$router.go(-1)"></TopManu>
    <!-- <TopManu :pharmacyStatus="true" @handcreate="handcreate" :signOut="true" @handleQuit="$router.go(-1)"></TopManu> -->
    <div class="tabsB">
      <el-tabs v-model="params.tabIndex" type="card" @tab-click="tabsIndexClick">
        <el-tab-pane label="待配药" name="1"></el-tab-pane>
        <el-tab-pane label="已配药" name="2"></el-tab-pane>
        <el-tab-pane label="已发药" name="3"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="search">
      <div class="s1">
        <el-input
          v-model="params.keyword"
          placeholder="请输入名称"
        ></el-input>
        <el-button @click="searchB()" class="butB_Sel">查询</el-button>
        <el-button @click="resetSearchB()" class="butB_Reset">重置</el-button>
      </div>
      <div class="selectBai">
        <div>
          <el-select v-model="params.value1" placeholder="药品仓库" @change="searchB">
            <el-option
              v-for="item in KuFangList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div>
          <el-date-picker
            @change="searchB"
            v-model="params.start_time"
            type="daterange"
            value-format="yyyy-MM-dd"
            start-placeholder="处方日期"
            end-placeholder="处方日期"
          >
          </el-date-picker>
        </div>
      </div>
    </div>

    <div class="tablesB">
      <el-table v-loading="params.loading" :data="data" border>
        <el-table-column type="index" width="70" label="序号">
        </el-table-column>

        <template v-for="(item, index) in tableTitle">

          <el-table-column :width="item.width" v-if="item.prop == 'member.gender'" :prop="item.prop" :label="item.label"
                           :key="index">
            <template slot-scope="scope">
              <div v-if="scope.row.member">{{ $baseBai['gender'][scope.row.member.gender - 1].label }}</div>
            </template>
          </el-table-column>
          <el-table-column v-else :width="item.width" :prop="item.prop" :label="item.label"
                           :key="index+item"></el-table-column>
        </template>
        <el-table-column label="操作" width="250" fixed="right">
          <template slot-scope="scope">
            <div>
              <el-button
                size="mini"
                class="butB_Det"
                type="success"
                @click="handleEdit(scope.$index, scope.row, 1)"
              >详情
              </el-button
              >
              <el-button
                v-if="params.tabIndex === '1'"
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row, 2)"
              >配药
              </el-button
              >
              <el-button
                v-if="params.tabIndex === '2'"
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row, 3)"
              >发药
              </el-button
              >

              <el-button
                v-if="params.tabIndex === '2'||params.tabIndex === '3'"
                size="mini"
                type="info"
                @click="handleEdit(scope.$index, scope.row, 4)"
              >配药详情
              </el-button
              >
              <el-button
                v-if="params.tabIndex === '3'"
                size="mini"
                type="danger"
                @click="handleEdit(scope.$index, scope.row, 5)"
              >退药
              </el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          class="fenye"
          :background="true"
          :current-page="params.page"
          :page-size="params.limit"
          layout="prev, pager, next"
          @current-change="handlePagination"
          :total="params.pageCount">
        </el-pagination>
      </div>
    </div>


    <el-dialog
      :title="dialogTitle"
      v-if="MZ_Detail_Show"
      :visible.sync="MZ_Detail_Show"
      width="30%"
      :destroy-on-close="true"
      :before-close="()=>{this.MZ_Detail_Show=!this.MZ_Detail_Show}">
      <MZdetail :dialogTitle='dialogTitle' :that='this'></MZdetail>

    </el-dialog>
  </div>
</template>

<script>
let t;
import MZdetail from './common/detail'
import TopManu from "@/components/TopMenu";
import {mapState, mapActions} from "vuex";
// getDict_dataKuFangList
export default {
  name:"pharmacy_MZ",
  data() {
    return {
      MZ_Detail_Show: false,
      tableTitle: [],
      dialogTitle: '',
      params: {
        loading: false,
        tabIndex: "1",
        page: 1,
        limit: 10,
        value1: "",

        keyword: "",
        start_time: "",
        pageCount: 0,
      },

      selectDetail: {},
      data: [],
      item2:[],
    };
  },
  components: {
    TopManu,
    MZdetail,
  },
  computed: {
    ...mapState({
      KuFangList: state => state.dictBai.KuFangList
    }),
  },
  mounted() {
    t = this;

    t.tableTitle = t.$baseBai["pharmacy_MZ_list1"];

    if (t.KuFangList.length == 0) {
      t['dictBai/getDict_dataKuFangList']({})
    }
    t.getList()

  },
  methods: {
    ...mapActions([
      'dictBai/getDict_dataKuFangList',
      'pharmacy_MZ/getDrugItem',
      'pharmacy_MZ/getDrugFillNum',
      'pharmacy_MZ/getclinic_drug_houseDispenseInfo',


    ]),
    resetSearchB() {
      this.params = {
        loading: false,
        tabIndex: "1",
        page: 1,
        limit: 10,
        value1: "",

        keyword: "",
        start_time: "",
        pageCount: 0,
      }
      this.getList()
    },
  

    

       handcreate(type){
          console.log(type)
      

        if(type==5){
          
          this.$router.push({name:'drugCollar'})
        }else if(type==2){
          this.$router.push({name:'zy_statistic',query:{type:'mz'}})
        }else{
             this.$router.push({
          name: 'pharmacy_STOCK', query: {
            house_id: 1,
          }
        })
        }

           
     
    },
    handleEdit(...item) {


      if (item[2] === 4) {
        t.dialogTitle = '配药详情'
        t['pharmacy_MZ/getclinic_drug_houseDispenseInfo']({id: item[1].id}).then(res => {
          if (res.code == 200) {
            t.MZ_Detail_Show = !t.MZ_Detail_Show;
          }
        })

      } else if (item[2] === 3) {
        let d = {id: item[1].id}
        t['_API'].getStoreDrugHandOut(d).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: 'success'
            });
            this.getList()
          }
        })
      } else if (item[2] === 2) {
        t.dialogTitle = '配药'
        t.selectDetail = item[1];
       
        t['pharmacy_MZ/getDrugItem']({id: item[1].id}).then(res => {
          if (res.code == 200) {
            t.MZ_Detail_Show = !t.MZ_Detail_Show;

          }
        })
      } else if (item[2] === 1) {
        t.dialogTitle = '详情信息'
        t['pharmacy_MZ/getDrugItem']({id: item[1].id}).then(res => {
          if (res.code == 200) {
            t.MZ_Detail_Show = !t.MZ_Detail_Show;
          }
        })

      } else if (item[2] === 5) {
        t.dialogTitle = '退药详情'
        // console.log(item[1].id)
         t.item2=item
        t['pharmacy_MZ/getclinic_drug_houseDispenseInfo']({id: item[1].id}).then(res => {
          if (res.code == 200) {
            t.MZ_Detail_Show = !t.MZ_Detail_Show;
          }
        })
      }
      // t['pharmacy_MZ/getDrugItem']({})
      //  t.MZ_Detail_Show=!t.MZ_Detail_Show;
    },
    tabsIndexClick(tab, event) {
      let t = this;

      this.params = {
        loading: false,
        tabIndex: t.params.tabIndex,
        page: t.params.page,
        limit: t.params.limit,
        value1: "",
        keyword: "",
        start_time: "",
        pageCount: 0,

      }
      t.data = [];
      t.getList()
    },

    searchB() {
      console.log(123)
      t.params.page = 1;
      t.getList()
    },


    handlePagination(e) {

      t.params.page = e;
      t.getList()

    },
    getList() {
      console.log("this.params.start_time", this.params.start_time)
      let d = {
        keyword: t.params.keyword,
        limit: t.params.limit,
        page: t.params.page,
        time: this.params.start_time ? ((this.params.start_time.toString()).replace(',', '|')).toString() : '',
        status: t.params.tabIndex,
      }
      t.data = [];
      this.params.loading = true;
      this['_API'].getDrugOrderIndex(d).then(res => {
        this.params.loading = false;
        if (res.code == 200) {


          this.data = res.data.list;
          this.params.pageCount = res.data.count;

        }
      })

    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-tabs__nav {

  .el-tabs__item {
    border-bottom: 1px solid #e4e7ed;
  }

  .is-active {
    color: #02bf6b;
  }

  .el-tabs__item:hover {
    color: #02bf6b;
  }
}

.search {
  border: 1px solid #f2f2f2;
  margin: 10px 2%;
  padding: 20px;
  border-radius: 10px;

  .s1 {
    width: 500px;
    display: flex;

    button {
      margin-left: 20px;
      margin-bottom: 20px;
      color: white;
    }
  }

  .selectBai {
    display: flex;

    > div {
      margin-right: 10px;
    }
  }
}

.tableMore {
  /deep/ .el-button--primary {
    color: black;
    background-color: initial;
    border-color: #e2e2e2;
  }
}

.tablesB, .tabsB {
  margin: 20px 2% 0;
}

.fenye {
  text-align: right;
  margin-top: 20px;

}

/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #02bf6b;
}


/deep/ .el-dialog__body {
  height: 70vh;
  overflow: scroll;
}

/deep/ .el-dialog {
  width: 80% !important;
}
</style>
